<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { objectsCreateFolderService, objectsDeleteService, objectsDownloadService, objectsGetListService, objectsUploadService } from '@/api/objects'
import { unixMillisecondstoDateString } from '@/utils/date'
import { Plus, CloseBold, Upload, Download, View, Delete } from '@element-plus/icons-vue'
import { getFileTypeByExtendName, MIME_TYPES } from '@/utils/objects'

const router = useRouter()
const route = useRoute()
let path = route.query.path
let sepIndex = path.indexOf('/', 1)
if (sepIndex === -1) { sepIndex = path.length }
let bucketName = path.slice(1, sepIndex)

/* 获取对象列表 */
let isGet = false;
const objectsList = ref([])
let lastId = 0

const getObjectsList = async () => {
  isGet = true
  let res;
  try {
    res = await objectsGetListService(0, path)
  } catch(e) {
    isGet = false
  }
  const list = res.data.data
  if (list.length > 0) {
    // 记录lastId
    lastId = list[list.length - 1].id 
    // 转换数据格式
    list.forEach((e) => {
      let unit = 'KB'
      e.lastModifiedTime = unixMillisecondstoDateString(e.lastModifiedTime)
      e.size = (e.size / 1024).toFixed(1)
      if (e.size > 1024) {
        e.size = (e.size / 1024).toFixed(1)
        unit = 'MB'
      }
      if (e.size > 1024) {
        e.size = (e.size / 1024).toFixed(1)
        unit = 'GB' 
      }
      e.size = e.size + unit
    })
  }
  objectsList.value = list
  isGet = false
}
getObjectsList()

// 防抖函数
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

/* 无限滚动 */
function isNearBottom() {
  return window.innerHeight + window.scrollY >= document.body.offsetHeight - 100;
}

// 修改后的监听滚动事件函数，使用防抖
const scrollGetObjects = debounce(async () => {
  if (isGet || !isNearBottom()) return;

  isGet = true;
  let res;
  try {
    res = await objectsGetListService(lastId, path);
  } catch (e) {
    isGet = false;
    return;
  }
  const list = res.data.data;

  if (list.length > 0) {
    // 转换数据格式
    list.forEach((e) => {
        let unit = 'KB'
        e.lastModifiedTime = unixMillisecondstoDateString(e.lastModifiedTime)
        e.size = (e.size / 1024).toFixed(1)
        if (e.size > 1024) {
          e.size = (e.size / 1024).toFixed(1)
          unit = 'MB'
        }
        if (e.size > 1024) {
          e.size = (e.size / 1024).toFixed(1)
          unit = 'GB' 
        }
        e.size = e.size + unit
      })

    objectsList.value.push(...list);
    lastId = list[list.length - 1].id;
  }
  isGet = false;
}, 500);

/* 获取文件类型图标 */
const getIcon = (name, type) => {
  if (!type || type === 'file') {
    type = getFileTypeByExtendName(name)
  }
  if (type.startsWith('image/')) {
    return '<svg t="1733274106713" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1180" width="200" height="200"><path d="M0 0h1024v1024H0z" fill="#FFFFFF" fill-opacity="0" p-id="1181"></path><path d="M213.333333 85.333333h469.333334l213.333333 215.296V853.333333a85.333333 85.333333 0 0 1-85.333333 85.333334H213.333333a85.333333 85.333333 0 0 1-85.333333-85.333334V170.666667a85.333333 85.333333 0 0 1 85.333333-85.333334z" fill="#FFC757" p-id="1182"></path><path d="M682.666667 85.333333v189.696c0 13.056 10.709333 23.637333 23.893333 23.637334H896l-213.333333-213.333334z" fill="#F79F2B" p-id="1183"></path><path d="M804.48 655.232l-77.226667-136.618667a45.226667 45.226667 0 0 0-79.232 0l-73.173333 129.450667-136.021333-240.725333a45.226667 45.226667 0 0 0-79.189334 0l-140.117333 247.893333c-17.578667 31.146667 4.394667 70.101333 39.594667 70.101333h505.770666c35.2 0 57.173333-38.954667 39.594667-70.101333zM603.050667 389.12a64 64 0 1 0 116.565333-52.906667 64 64 0 0 0-116.565333 52.906667z" fill="#EF9F2B" p-id="1184"></path><path d="M804.48 653.994667l-77.226667-139.093334a44.885333 44.885333 0 0 0-79.232 0l-73.173333 131.797334-136.021333-245.034667a44.885333 44.885333 0 0 0-79.189334 0l-140.117333 252.330667c-17.578667 31.701333 4.394667 71.338667 39.594667 71.338666h505.770666c35.2 0 57.173333-39.68 39.594667-71.338666zM604.330667 391.509333c9.344 21.376 28.928 35.968 51.370666 38.229334a62.250667 62.250667 0 0 0 57.557334-27.136 67.925333 67.925333 0 0 0 6.144-65.365334 63.36 63.36 0 0 0-51.370667-38.272 62.250667 62.250667 0 0 0-57.557333 27.178667 67.925333 67.925333 0 0 0-6.144 65.365333z" fill="#FFFFFF" p-id="1185"></path></svg>'
  } 
  if (type === MIME_TYPES.PDF) {
    return '<svg t="1733274387206" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1338" width="200" height="200"><path d="M0 0h1024v1024H0z" fill="#D8D8D8" fill-opacity="0" p-id="1339"></path><path d="M341.333333 85.333333h384.128L938.666667 300.629333V853.333333a85.333333 85.333333 0 0 1-85.333334 85.333334H341.333333a85.333333 85.333333 0 0 1-85.333333-85.333334V170.666667a85.333333 85.333333 0 0 1 85.333333-85.333334z" fill="#EEEEEE" p-id="1340"></path><path d="M725.333333 85.333333v189.696c0 13.056 10.709333 23.637333 23.893334 23.637334H938.666667l-213.333334-213.333334z" fill="#FF7878" p-id="1341"></path><path d="M85.333333 341.333333m42.666667 0l682.666667 0q42.666667 0 42.666666 42.666667l0 384q0 42.666667-42.666666 42.666667l-682.666667 0q-42.666667 0-42.666667-42.666667l0-384q0-42.666667 42.666667-42.666667Z" fill="#FF7878" p-id="1342"></path><path d="M466.133333 420.693333V725.333333h49.92v-116.906666h75.52c74.24 0 111.36-31.573333 111.36-94.293334 0-62.293333-37.12-93.44-110.506666-93.44h-126.293334z m49.92 42.666667h72.533334c21.76 0 37.973333 3.84 48.213333 11.946667 10.24 7.68 15.786667 20.48 15.786667 38.826666 0 18.346667-5.12 31.573333-15.36 39.68-10.24 7.68-26.453333 11.946667-48.64 11.946667h-72.533334v-102.4z" fill="#EEEEEE" p-id="1343"></path></svg>'
  }
  if (type === MIME_TYPES.MP3) {
    return '<svg t="1733274445568" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1651" width="200" height="200"><path d="M0 0h1024v1024H0z" fill="#FFFFFF" fill-opacity="0" p-id="1652"></path><path d="M213.333333 85.333333h469.333334l213.333333 215.296V853.333333a85.333333 85.333333 0 0 1-85.333333 85.333334H213.333333a85.333333 85.333333 0 0 1-85.333333-85.333334V170.666667a85.333333 85.333333 0 0 1 85.333333-85.333334z" fill="#FF7878" p-id="1653"></path><path d="M682.666667 85.333333v189.696c0 13.056 10.709333 23.637333 23.893333 23.637334H896l-213.333333-213.333334z" fill="#D15050" p-id="1654"></path><path d="M682.666667 287.445333a32.426667 32.426667 0 0 0-10.624-24.192 27.946667 27.946667 0 0 0-24.149334-6.698666l-276.138666 55.466666c-13.909333 2.773333-23.936 15.786667-23.936 30.933334l0.170666 283.008a64.213333 64.213333 0 0 0-23.637333-4.48c-37.76 0-68.352 32.810667-68.352 73.258666C256 735.189333 286.592 768 324.352 768c37.76 0 68.352-32.810667 68.352-73.258667v-267.008l245.248-49.28v192a64.213333 64.213333 0 0 0-23.637333-4.48c-37.76 0-68.352 32.853333-68.352 73.258667 0 40.448 30.592 73.258667 68.352 73.258667 37.76 0 68.352-32.810667 68.352-73.258667V287.445333z" fill="#EF5252" p-id="1655"></path><path d="M682.666667 287.445333a32.426667 32.426667 0 0 0-10.624-24.192 27.946667 27.946667 0 0 0-24.149334-6.698666l-276.138666 55.466666c-13.909333 2.773333-23.936 15.786667-23.936 30.933334l0.170666 283.008a64.213333 64.213333 0 0 0-23.637333-4.48c-37.76 0-68.352 32.810667-68.352 73.258666C256 735.189333 286.592 768 324.352 768c37.76 0 68.352-32.810667 68.352-73.258667v-267.008l245.248-49.28v192a64.213333 64.213333 0 0 0-23.637333-4.48c-37.76 0-68.352 32.853333-68.352 73.258667 0 40.448 30.592 73.258667 68.352 73.258667 37.76 0 68.352-32.810667 68.352-73.258667V287.445333z" fill="#FFFFFF" p-id="1656"></path></svg>'
  } 
  if (type === MIME_TYPES.MP4) {
    return '<svg t="1733274414936" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1496" width="200" height="200"><path d="M0 0h1024v1024H0z" fill="#FFFFFF" fill-opacity="0" p-id="1497"></path><path d="M213.333333 85.333333h469.333334l213.333333 215.296V853.333333a85.333333 85.333333 0 0 1-85.333333 85.333334H213.333333a85.333333 85.333333 0 0 1-85.333333-85.333334V170.666667a85.333333 85.333333 0 0 1 85.333333-85.333334z" fill="#8B72F7" p-id="1498"></path><path d="M682.666667 85.333333v189.696c0 13.056 10.709333 23.637333 23.893333 23.637334H896l-213.333333-213.333334z" fill="#624FB9" p-id="1499"></path><path d="M586.794667 384H301.738667C276.48 384 256 404.48 256 429.738667v178.261333c0 25.301333 20.48 45.738667 45.738667 45.738667h285.056c25.301333 0 45.738667-20.48 45.738666-45.738667v-178.261333c0-25.173333-20.48-45.738667-45.738666-45.738667z m164.906666 6.954667l-95.829333 89.557333a52.48 52.48 0 0 0 0 76.842667l95.829333 89.514666a25.472 25.472 0 0 0 42.88-18.517333v-218.88c0-22.186667-26.666667-33.706667-42.88-18.517333z" fill="#FFFFFF" p-id="1500"></path></svg>'
  }
  if (type === MIME_TYPES.FOLDER) {
    return '<svg t="1734248829969" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1438" width="200" height="200"><path d="M0 0h1024v1024H0z" fill="#D8D8D8" fill-opacity="0" p-id="1439"></path><path d="M885.333333 179.2H405.333333c0-28.288-23.893333-51.2-53.333333-51.2h-213.333333C109.226667 128 85.333333 150.912 85.333333 179.2v153.6C85.333333 361.088 109.226667 384 138.666667 384h746.666666C914.773333 384 938.666667 361.088 938.666667 332.8V230.4c0-28.288-23.893333-51.2-53.333334-51.2z" fill="#CCA352" p-id="1440"></path><path d="M804.565333 213.333333H219.434667C192.512 213.333333 170.666667 238.805333 170.666667 270.208v56.874667C170.666667 358.528 192.512 384 219.434667 384h585.130666C831.488 384 853.333333 358.528 853.333333 327.082667V270.208C853.333333 238.805333 831.488 213.333333 804.565333 213.333333z" fill="#FFFFFF" p-id="1441"></path><path d="M885.333333 298.666667H138.666667C109.226667 298.666667 85.333333 320.938667 85.333333 348.458667v497.749333C85.333333 873.685333 109.226667 896 138.666667 896h746.666666c29.44 0 53.333333-22.314667 53.333334-49.792V348.416C938.666667 320.938667 914.773333 298.666667 885.333333 298.666667z" fill="#FFCC66" p-id="1442"></path></svg>'
  }
  return '<svg t="1733274492352" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1809" width="200" height="200"><path d="M0 0h1024v1024H0z" fill="#FFFFFF" fill-opacity="0" p-id="1810"></path><path d="M213.333333 85.333333h469.333334l213.333333 215.296V853.333333a85.333333 85.333333 0 0 1-85.333333 85.333334H213.333333a85.333333 85.333333 0 0 1-85.333333-85.333334V170.666667a85.333333 85.333333 0 0 1 85.333333-85.333334z" fill="#A8BDE3" p-id="1811"></path><path d="M682.666667 85.333333v189.696c0 13.056 10.709333 23.637333 23.893333 23.637334H896l-213.333333-213.333334z" fill="#8595B2" p-id="1812"></path><path d="M517.632 352.597333c-37.888 0-67.584 10.752-89.6 32.256-22.528 21.504-33.28 51.2-33.28 89.088h58.368c0-22.016 4.096-38.912 12.8-50.688 10.24-13.824 26.112-20.48 48.128-20.48 17.408 0 31.232 4.608 40.96 14.336 9.216 9.728 14.336 23.04 14.336 39.936 0 12.8-4.608 25.088-13.824 36.352l-6.144 7.168c-33.28 29.696-53.248 51.2-59.904 65.024-7.168 13.824-10.24 30.72-10.24 50.176v7.168h58.88v-7.168c0-12.288 2.56-23.552 7.68-33.792 4.608-9.216 11.264-17.92 20.48-25.088 24.576-21.504 39.424-35.328 44.032-40.448 12.288-16.384 18.944-37.376 18.944-62.976 0-31.232-10.24-55.808-30.72-73.728-20.48-18.432-47.616-27.136-80.896-27.136z m-9.216 295.424a37.418667 37.418667 0 0 0-27.648 10.752c-8.192 7.168-11.776 16.384-11.776 27.648s3.584 20.48 11.776 27.648a37.802667 37.802667 0 0 0 27.648 11.264c11.264 0 20.48-3.584 28.672-10.752a38.997333 38.997333 0 0 0 11.264-28.16 37.802667 37.802667 0 0 0-11.264-27.648 40.704 40.704 0 0 0-28.672-10.752z" fill="#FFFFFF" p-id="1813"></path></svg>'
}

/* 点击表格行 */
const isClickRowAsideShow = ref(false)
let clickRow = null
let selectedObjectName = ''

const isSelectRowAsideShow = ref(false)

const onRowClick = (row) => {
  isSelectRowAsideShow.value = false

  // 特殊处理文件夹
  if (row.type === MIME_TYPES.FOLDER) {
    router.push(`/buckets/objects?path=${path}/${row.name}`)
    return
  }

  if (clickRow == row) {
    isClickRowAsideShow.value = !isClickRowAsideShow.value
  } else {
    isClickRowAsideShow.value = false
    setTimeout(() => {
      isClickRowAsideShow.value = true
    }, 200)
  }
  clickRow = row
  selectedObjectName = row.name
}

/* 勾选 */
let selectRows = []

const onSelect = (rows) => {
  selectRows = rows
  isClickRowAsideShow.value = false
  isSelectRowAsideShow.value = true
}

/* 创建文件夹 */
const form = ref()

const isShowDialog = ref(false)

const folderModel = ref({
  name: ''
})

const rules = {
  name: [
    { required: true, message: '请输入文件名！', trigger: 'submit' }
  ]
}

const onCreateFolder = async () => {
  await form.value.validate()
  await objectsCreateFolderService(`${path}/${folderModel.value.name}`)
  isShowDialog.value = false
  getObjectsList()
}

/* 上传 */
const fileInputRef = ref()

const onUpload = async (event) => {
  const files = event.target.files 
  if (files.length === 0) {
    return
  }
  const file = files[0]
  const data = new FormData()
  data.append('objectPath', `${path}/${file.name}`)
  data.append('objectFile', file)
  await objectsUploadService(data)
  getObjectsList()
}

/* 下载 */
const onDownload = async () => {
  const res = await objectsDownloadService(`${path}/${selectedObjectName}`)
  const url = window.URL.createObjectURL(res.data)
  const a = document.createElement('a')
  a.href = url
  a.download = selectedObjectName
  document.body.appendChild(a)
  a.click()
  a.remove()
  window.URL.revokeObjectURL(url)
}

/* 预览 */
const isPreview = ref(false)
const fileType = ref('') // 要预览文件的类型
const fileUrl = ref('') // 要预览文件的Url

const onPreview = async () => {
  // 这里路径暂时写死
  const res = await objectsDownloadService(`${path}/${selectedObjectName}`)
  const url = window.URL.createObjectURL(res.data)
  
  // 获取文件类型
  fileType.value = clickRow.type

  if (!fileType.value || fileType.value === 'file') {
    fileType.value = getFileTypeByExtendName(clickRow.name) // 为了兼容本地模式
  }

  // 根据文件类型选择展示的方式
  if (fileType.value.startsWith('image/')) {
    fileUrl.value = url
  } else if (fileType.value === MIME_TYPES.PDF) {
    fileUrl.value = import.meta.env.VITE_PDF_JS_PATH + encodeURIComponent(url)
  } else if (fileType.value === MIME_TYPES.MP3) {
    fileUrl.value = url
  } else if (fileType.value === MIME_TYPES.MP4) {
    fileUrl.value = url
  }
  isPreview.value = true
}

const onDelete = async () => {
  await ElMessageBox.confirm('你确定要删除该对象么', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  })
  let rows;
  if (isClickRowAsideShow.value) {
    rows = [clickRow]
  } else {
    rows = selectRows
  }
  const ids = []
  rows.forEach((row) => {
    ids.push(row.id)
  })
  await objectsDeleteService(bucketName, ids.join(','))
  getObjectsList()
}


/* 当 path 参数变化时，执行的操作 */
watch(() => route.query.path, (newPath, oldPath) => {
  lastId = 0
  isClickRowAsideShow.value = false;
  isSelectRowAsideShow.value = false;

  path = newPath
  sepIndex = path.indexOf('/', 1)
  if (sepIndex === -1) { sepIndex = path.length }
  bucketName = path.slice(1, sepIndex)
  getObjectsList()
});
</script>

<template>
  <el-container>
    <el-header style="border: 1px solid rgb(229, 229, 229); display: flex; align-items: center">
      <el-icon size="30">
        <svg
          t="1732953591828"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="10531"
        >
          <path
            d="M976.372585 33.986724C960.778676 12.795002 935.98836 0 909.598668 0H86.720105C60.330414 0.399844 35.540097 12.795002 19.946189 33.986724 3.552592 56.377977-3.244752 84.367044 1.553373 111.956267c20.392034 118.353768 63.175322 367.456462 97.162046 566.57868v0.399844C116.308547 780.095275 131.502612 868.460758 140.299176 919.640765c5.597813 43.183132 41.583756 75.57048 85.166732 77.169856h545.786802c43.582975-1.599375 79.568918-33.986724 85.166731-77.169856l41.183913-240.30613 0.399844-1.599375L953.581487 352.262398v-0.799688l41.183913-239.506443c4.798126-27.589223-1.599375-55.57829-18.392815-77.969543m-151.940649 674.136665h-651.745412l-12.795002-74.370949h676.935573l-12.395159 74.370949zM880.010226 381.450996H115.908703l-12.795002-74.370949h789.291683L880.010226 381.450996z"
            p-id="10532"
          ></path>
        </svg>
      </el-icon>
      <h1 style="margin-left: 5px">{{ bucketName }}</h1>
      <div style="flex: 1; display: flex; justify-content: flex-end;">
      </div>
        <el-button
          @click="isShowDialog = true"
          type="default"
          color="black"
          size="large"
          >
        创建文件夹<el-icon size="20" style="margin-left: 5px;"><Plus /></el-icon>
        </el-button>

        <el-button
          @click="fileInputRef.click()"
          type="default"
          color="black"
          size="large"
          >
        上传<el-icon size="20" style="margin-left: 5px;"><Upload /></el-icon>
        <input ref="fileInputRef" @change="onUpload" type="file" hidden>
        </el-button>
    </el-header>

    <el-container style="height: calc(100vh - 14vh - 60px - 90px);">
      <el-main style="border: 1px solid rgb(229, 229, 229)">
        <el-table
          height="100%"
          @scroll="scrollGetObjects"
          @select="onSelect"
          @select-all="onSelect"
          @row-click="onRowClick"
          highlight-current-row="true"
          row-style="cursor: pointer;"
          v-loading="loading"
          :data="objectsList"
        >
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="name" label="名字">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-icon size="25" style="margin-right: 5px;" v-html="getIcon(scope.row.name, scope.row.type)"></el-icon>
                {{ scope.row.name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="lastModifiedTime" label="上一次修改时间"></el-table-column>
          <el-table-column prop="size" label="大小"></el-table-column>

          <template #empty>
            <el-empty description="没有数据"></el-empty>
          </template>
        </el-table>


        <el-dialog style="font-weight: bold;" width="25%" v-model="isShowDialog" title="新建文件夹">
          <el-form ref="form" :model="folderModel" :rules="rules" label-width="auto" @submit.prevent>
            <el-form-item prop="name" label="文件夹名" label-position="left">
              <el-input v-model="folderModel.name" autocomplete="off" />
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button color="black" @click="onCreateFolder">
                确认
              </el-button>
            </span>
          </template>
        </el-dialog>

      </el-main>
      <el-aside width="20%" style="border: 1px solid rgb(229, 229, 229)" v-show="isClickRowAsideShow">
        <el-card>
          <template #header>
            <span style="font-weight: bold">操作</span>
          </template>
          <p @click="onDownload" style="display: flex; align-items: center; cursor: pointer">
            <el-icon style="margin-right: 3px"><Download /></el-icon>下载
          </p>
          <p @click="onPreview" style="display: flex; align-items: center; cursor: pointer">
            <el-icon style="margin-right: 3px"><View /></el-icon>预览
          </p>
          <template #footer><el-button @click="onDelete" type="danger" style="width: 100%">删除</el-button></template>
        </el-card>
      </el-aside>
      <el-aside width="20%" style="border: 1px solid rgb(229, 229, 229)" v-show="isSelectRowAsideShow">
        <el-card>
          <template #header>
            <span style="font-weight: bold">操作</span>
          </template>
          <p @click="onDelete" style="display: flex; align-items: center; cursor: pointer">
            <el-icon style="margin-right: 3px"><Delete /></el-icon>删除
          </p>
        </el-card>
      </el-aside>
    </el-container>
  </el-container>
  <el-drawer v-model="isPreview" :with-header="false" size="86%">
    <div style="height: 100%; display: flex; flex-direction: column">
      <div style="display: flex; justify-content: flex-end">
        <el-icon @click="isPreview = false" style="padding: 3px; cursor: pointer"
          ><CloseBold
        /></el-icon>
      </div>
      <div style="display: flex; justify-content: center; align-items: center; flex-grow: 1; max-height: 100%;">
        <img :src="fileUrl" style="max-width: 100%; max-height: 100%; display: block;" v-if="fileType.startsWith('image/')" />
        <iframe
          :src="fileUrl"
          style="width: 90%; height: 100%"
          v-else-if="fileType === MIME_TYPES.PDF"
        ></iframe>
        <video :src="fileUrl" style="max-width: 100%; max-height: 80%; box-sizing: border-box; object-fit: contain;" v-else-if="fileType === MIME_TYPES.MP4" autoplay></video>
        <audio :src="fileUrl" autoplay controls v-else-if="fileType === MIME_TYPES.MP3"></audio>
        <div style="border-radius: 5px; padding: 5%; height: auto; background-color: red;" v-else><strong>暂不支持预览该文件</strong></div>
      </div>
    </div>
  </el-drawer>
</template>

<style lang="scss" scoped>

</style>
